
<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建XP风格左侧面板 </h3>
  <div id="article_content" class="article_content">
    <p>通常,资源管理器文件夹在XP下的左侧的panel包含一些常见任务,这个教程向你展示如何创建XP左侧面板风&#26684;,使用easyui的panel插件.</p>
<p><img src="documentation/images/1344500305_8976.png" alt=""><br>
</p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
  定义一些panel</h4>
我们定义一些panel显示一些任务,每个panel应该至少有collapse(折叠)/expand(展开)工具按钮.
<p>代码看起来就像这些:<pre name="code" class="html">&lt;div style=&quot;width:200px;height:auto;background:#7190E0;padding:5px;&quot;&gt;  
    &lt;div class=&quot;easyui-panel&quot; title=&quot;Picture Tasks&quot; collapsible=&quot;true&quot; style=&quot;width:200px;height:auto;padding:10px;&quot;&gt;  
        View as a slide show&lt;br/&gt;  
        Order prints online&lt;br/&gt;  
        Print pictures  
    &lt;/div&gt;  
    &lt;br/&gt;  
    &lt;div class=&quot;easyui-panel&quot; title=&quot;File and Folder Tasks&quot; collapsible=&quot;true&quot; style=&quot;width:200px;height:auto;padding:10px;&quot;&gt;  
        Make a new folder&lt;br/&gt;  
        Publish this folder to the Web&lt;br/&gt;  
        Share this folder  
    &lt;/div&gt;  
    &lt;br/&gt;  
    &lt;div class=&quot;easyui-panel&quot; title=&quot;Other Places&quot; collapsible=&quot;true&quot; collapsed=&quot;true&quot; style=&quot;width:200px;height:auto;padding:10px;&quot;&gt;  
        New York&lt;br/&gt;  
        My Pictures&lt;br/&gt;  
        My Computer&lt;br/&gt;  
        My Network Places  
    &lt;/div&gt;  
    &lt;br/&gt;  
    &lt;div class=&quot;easyui-panel&quot; title=&quot;Details&quot; collapsible=&quot;true&quot; style=&quot;width:200px;height:auto;padding:10px;&quot;&gt;  
        My documents&lt;br/&gt;  
        File folder&lt;br/&gt;&lt;br/&gt;  
        Date modified: Oct.3rd 2010  
    &lt;/div&gt;  
&lt;/div&gt;  </pre></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
自定义panel外观效果</h4>
注意:那个视图外观不是我们想要的,我们必须改变panel头部的背景图片和<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">collapse(折叠)/expand(展开)按钮的icon的样式,</span>
<p>做到这个一点都不难,我们需要做的是重新定义一些CSS.</p>
<pre name="code" class="css">.panel-body{  
    background:#f0f0f0;  
}  
.panel-header{  
    background:#fff url('images/panel_header_bg.gif') no-repeat top right;  
}  
.panel-tool-collapse{  
    background:url('images/arrow_up.gif') no-repeat 0px -3px;  
}  
.panel-tool-expand{  
    background:url('images/arrow_down.gif') no-repeat 0px -3px;  
}  </pre><p>正如你所看到的,然而使用easyui定义用户界面非常简单.</p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
下载 EasyUI示例代码:</h4>
<div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px">
<a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-panel2-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-panel-demo.zip</a></div>


</div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>